<template>
  <div id="Note">
      <func-bar v-on:setIndex="setIndex" v-on:toggle="toggle" :bars="bars"></func-bar>
      <div id="NoteVar">
        <write v-show="index == 0" ref="write"></write>
        <rlabel v-if="index == 2"></rlabel>
        <card v-if="index == 3"></card>
      </div>
  </div>
</template>

<script>
import FuncBar from "@/components/global/component/Funcbar";
import Write from "./component/Write"
import Card from "./component/Card"
import Rlabel from "./component/Label"

export default {
  data() {
    return {
      index:0,
      bars:[
        {"icon":"mdi-xml", "color":"yellow", "notify": true, "info": "代码"},
        // {"icon":"mdi-ticket", "color":"red", "notify": false, "info": "笔记属性"},
        // {"icon":"mdi-label", "color":"green", "notify": false, "info": "标签"},
        // {"icon":"mdi-cards", "color":"orange", "notify": false, "info": "卡片"},
        // {"icon":"mdi-relation-many-to-one", "color":"blue", "notify": false, "info": "关联图"},
      ]
    }
  },
  components:{ FuncBar, Write, Card, Rlabel },
  methods:{
    setIndex(index) {
      this.index = index
    },
    toggle() {
      this.$refs.write.toggle()
    }
  }
}
</script>

<style lang="scss" scoped>
#Note{
  height:100%;
  #NoteVar{
    height:100%;
  }
}
</style>